<template>
  <div class="header-lay">
    <el-scrollbar class="menu-scrollbar" wrap-style="overflow-x:hidden;">
      <MenuNav ref="navMenu" class="menu-lay"
               :isCollapse="isCollapse" :menus="menus"
               :activeIndex="activeIndex" @select="handleSelect"/>
    </el-scrollbar>
    <div class="bottom-lay" v-if="showBottom">
      <el-link :underline="false" plain type="primary" @click="onCollapseUpdate">
        <el-icon>
          <Expand v-if="isCollapse"/>
          <Fold v-else />
        </el-icon>
      </el-link>
    </div>
  </div>
</template>

<script lang="ts" setup>

import router from "@/router";
import {ref} from "vue";
import MenuNav from "@/components/MenuNav/Menu";
import {useActiveMenu} from "@/utils/UseActiveMenu";
import {Expand, Fold} from "@element-plus/icons-vue";
import {VAR_TAG} from "@/stores/conf";

const isCollapse = ref(false);
const navMenu = ref();
const emits = defineEmits(["navMenuChanged"]);

interface Props {
  name: string,
  title?: string | undefined,
  menus: MenuType[],
  showBottom?: boolean,
}

const props = withDefaults(defineProps<Props>(), {
  title: undefined,
  user: undefined,
});

const activeMenuChanged = (item: string) => {
  if (item && item !== activeIndex.value) {
    activeIndex.value = item;
  }
}

const activeIndex = ref();
const {updateActiveMenu} = useActiveMenu(props.name, activeMenuChanged);

const onCollapseUpdate = () => {
  isCollapse.value = !isCollapse.value;
  navMenu.value?.updateCollapse(isCollapse.value);
}

const handleSelect = (key: string) => {
  emits("navMenuChanged", key);
  updateActiveMenu(key);
  router.push({path: key.replace(VAR_TAG, '')});
}

</script>

<style scoped>
.el-scrollbar__bar{
  display: none !important;
}

:deep(.el-scrollbar__wrap ){
  overflow-x: hidden !important;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  height: 0 !important;
}

.header-lay {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.menu-scrollbar {
  flex: 1;
  padding: 0;
  margin: 0;
  border: none;
}

.menu-lay {
  padding: 0;
  border: none;
}

.bottom-lay {
  padding: 12px 16px;
  color: #333;
  align-self: flex-end;
}

:deep(.el-submenu .el-menu-item) {
  min-width: auto !important;
}

:deep(.el-menu-item.is-active) {
  border-radius: 0;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  color: #2a94ff;
  background-color: #edf4ff !important;
}

:deep(.el-menu-item:not(.is-active):hover) {
  border-radius: 0;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  color: #2a94ff;
  background-color: rgba(0,0,0,0) !important;
}

</style>
